<template>
  <div class="img-list-container">
    <div v-for="(item, index) in list" :key="index" class="img-list-item">
      <img :src="item.url" class="img" alt="">
      <div class="close-icon" @click="deleteImg(item, index)">
        <i class="el-icon-close"/>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  methods: {
    deleteImg(item, index) {
      this.$emit('deleteImg', { item, index });
    }
  }
};
</script>
<style lang="scss" scoped>
.img-list-container {
  display: flex;
  flex-wrap: wrap;
  .img-list-item {
    width: 144px;
    height: 144px;
    margin-right: 16px;
    margin-bottom: 16px;
    padding: 8px;
    position: relative;
    border-radius: 8px;
    border: 2px dashed #D5D8E3;
    overflow: hidden;
    .img {
      width: 100%;
      height: 100%;
      border-radius: 4px;
    }
    .close-icon {
      position: absolute;
      right: -12px;
      top: -13px;
      display: flex;
      justify-content: flex-start;
      align-items: flex-end;
      width: 35px;
      height: 35px;
      padding: 4px;
      background: #D5D8E3;
      font-size: 16px;
      border-radius: 50%;
      color: #fff;
      // display: none;
      cursor: pointer;
    }
  }
}
</style>
